// pages/songDetail/songDetail.js
import request from '../../../utils/request'
import PubSub from 'pubsub-js'
import moment from 'moment'
let positionX

Page({
  // 1. 播放或暂停歌曲
  handlerPlayOrPause() {
    const isPlay = !this.data.isPlay
    // 重新更新回去
    this.setData({
      isPlay
    })
    // 设置歌曲的播放或暂停
    if (isPlay) {
      this.player.play()
    } else {
      this.player.pause()
    }
  },

  // 2. 获取歌曲对象
  async getSongDetail() {
    const {
      songId: ids
    } = this.data
    //发送请求
    const result = await request({
      url: '/song/detail',
      data: {
        ids
      }
    })

    if (result.code === 200) {
      this.setData({
        songInfo: {
          singer: result.songs[0].ar[0].name,
          songPicUrl: result.songs[0].al.picUrl
        }
      })

      // 设置歌曲的名称
      wx.setNavigationBarTitle({
        title: result.songs[0].name
      })
    }
  },

  // 3. 获取歌曲播放的链接地址
  async getSongUrl() {
    const {
      songId: id
    } = this.data
    const result = await request({
      url: '/song/url',
      data: {
        id
      }
    })

    if (result.code === 200) {
      this.setData({
        songUrl: result.data[0].url
      })
    }
  },

  // 4. 单击'上一首''下一首'实现歌曲切换
  handlerSwitch(event) {
    const type = event.target.id
    // 通过PubSub发布出去
    PubSub.publish('type', type)
  },

  // 5. 鼠标按下的时候 也就是手指按下的时候 要让小圆点的大小变的大一些
  handlerStart(event) {
    // 5.1 获取按压后的位置
    positionX = event.touches[0].clientX * 2 - 150
    // 5.2 暂停一下播放时间的更新
    this.player.onTimeUpdate(() => {})
    // 5.3 重新设置一下值
    this.setData({
      isActive: true,
      positionX,
      currentTime: moment((positionX / 450) * this.player.duration * 1000).format('mm:ss')
      // progressWidth:positionX
    })
  },

  // 6. 手指移动的时候
  handlerMove(event) {
    // 6.1 获取移动的位置
    positionX = event.touches[0].clientX * 2 - 150
    // 6.2 给进度条赋值
    this.setData({
      positionX,
      currentTime: moment((positionX / 450) * this.player.duration * 1000).format('mm:ss')
    })
  },

  // 7. 手指抬起的时候
  handlerEnd(event) {
    // 7.1 手指抬起来离开的时候 小圆点要恢复原样  进度条要到当前跳转的位置
    this.setData({
      isActive: false,
      progressWidth: positionX,
    })
    // 7.2 播放进度跳转到此位置
    this.player.seek(positionX / 450 * this.player.duration)
    // 7.3 重新更新进度时间
    this.player.onTimeUpdate(() => {
      this.setData({
        currentTime: moment(this.player.currentTime * 1000).format('mm:ss'),
        // duration: moment(this.player.duration*1000).format('mm:ss'),
        progressWidth: this.player.currentTime * 450 / this.player.duration
      })
    })
  },

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,
    songId: '',
    songInfo: {
      singer: '', // 歌手名称
      songPicUrl: '', // 歌曲的图片
    },
    songUrl: '', // 歌曲播放的链接地址
    currentTime: '00:00',
    duration: '00:00',
    progressWidth: '',
    positionX: 0,
    isActive: false // 是否让小圆球变大
  },

  // 8. 封装创建页面音频函数
  async createAudioManager(songId) {
    this.setData({
      songId, //保存歌曲ID
      isPlay: true
    })

    // 1. 获取歌曲信息
    await this.getSongDetail()

    // 2. 获取歌曲播放链接 
    await this.getSongUrl()

    // 3. 设置音频的播放
    this.player = wx.getBackgroundAudioManager()
    /* this.player.src = this.data.songUrl */
    if (this.data.songUrl) {
      this.player.src = this.data.songUrl
    } else {
      wx.showModal({
        title: '提示',
        content: '请充值会员',
        success(res) {
          if (res.confirm) {
            // console.log('用户点击确定')
            PubSub.publish('type', 'next')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
    this.player.title = this.data.songInfo.singer
  },

/**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // 从options当中，获取传递过来的url参数
    const songId = options.songId

    await this.createAudioManager(songId)
    // 1. 设置系统音乐图标和当前自身音乐图标同步
    this.player.onPlay(() => {
      this.setData({
        isPlay: true
      })
    })

    this.player.onPause(() => {
      this.setData({
        isPlay: false
      })
    })

    // 2. 歌曲播放完成之后 自动播放下一首
    this.player.onEnded(() => {
      PubSub.publish('type', 'next')
    })

    // 3. 注册一个监听音乐播放进度事件
    this.player.onTimeUpdate(() => {
      this.setData({
        currentTime: moment(this.player.currentTime * 1000).format('mm:ss'),
        durationTime: moment(this.player.duration * 1000).format('mm:ss'),
        /* progressWidth: this.player.currentTime * 450 / this.player.duration + 'rpx' */
        progressWidth: (this.player.currentTime / this.player.duration) * 450
      })
    })

    // 当前是在歌曲详情页面  当单击了'下一首'或'上一首'按钮时,要切换歌曲
    // 所谓的切换也就是根据'歌曲id'重新发送请求 获取新歌曲的详情及播放链接

    // 订阅消息 接收传递过来的songId
    PubSub.subscribe('songId', (_, songId) => {
      this.createAudioManager(songId)
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})